<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<!--<script src="livevalidation_prototype.js"> </script>-->
<script src="livevalidation_standalone.js"></script>
<style type="text/css">
.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00;
}
	
.LV_invalid {
    color:#CC0000;
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}
</style>
</head>

<body>
<form action="#" method="post" name="form">
 Ingresa Texto hello <input type="text" id="sayHello" />
		          <script type="text/javascript">
		            var sayHello = new LiveValidation('sayHello', { validMessage: 'Ok!', wait: 500});
		            sayHello.add(Validate.Presence, {failureMessage: "No ha ingresado el texto!"});
		            sayHello.add(Validate.Format, {pattern: /^hello$/i, failureMessage: "El texto no coincide" } );
		          </script><br /><br />
                  Valida Campo Vacío <input type="text" id="f1" />
				  <script type="text/javascript">
		            var f1 = new LiveValidation('f1');
		            f1.add(Validate.Presence);
		          </script><br /><br />
                  Debe contener la palabra live<input type="text" id="f2" />

				  <script type="text/javascript">
		            var f2 = new LiveValidation('f2');
		            f2.add(Validate.Format, { pattern: /live/i });
		          </script>
                  <br /><br />
                   Escriba un numero  <input type="text" id="f3" />
				 <script type="text/javascript">
		            var f3 = new LiveValidation('f3');
		            f3.add(Validate.Numericality);
		          </script>
                  <br /><br />
                  Escriba un numero entero  no decimales <input type="text" id="f4" />
				  <script type="text/javascript">
		            var f4 = new LiveValidation('f4');
		            f4.add(Validate.Numericality, { onlyInteger: true } );
		          </script>
                  <br /><br />
                Solo puedes ingresar 4 caracteres y el numero 2000
                <input type="text" id="f5" />
  <script type="text/javascript">
		            var f5 = new LiveValidation('f5');
		            f5.add(Validate.Numericality, { is: 2000 } );
		          </script>  
                  <br /><br />
                  numero de mas de 4 cifras: 
                  <input type="text" id="f6" />
				  <script type="text/javascript">
		            var f6 = new LiveValidation('f6');
		            f6.add(Validate.Numericality, { minimum: 2000 } );
		          </script>  <br /><br />
                  En este ejemplo se comprobará que el valor es un número que entra dentro de una gama que oferta. This is done supplying both a ‘minimum’ and ‘maximum’. Esto se hace tanto el suministro de un «mínimo» y «máximo».

Should be between 4 and 8 characters in length: Debe estar entre 4 y 8 caracteres de longitud: <input type="text" id="f7" />
				  <script type="text/javascript">
		            var f7 = new LiveValidation('f7');
		            f7.add(Validate.Numericality, { maximum: 2000 } );
		          </script> <br /><br />
                  Ingrese un numero entre 2000 y 2003 <input type="text" id="f8" />
                  <br /><br />
                  <input type="text" id="f9" />
				  <script type="text/javascript">
		            var f9 = new LiveValidation('f9');
		            f9.add(Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );
		          </script><br /><br />
                  Ingrese solo 4 caracteres<input type="text" id="f10" />
				  <script type="text/javascript">
		            var f10 = new LiveValidation('f10');
		            f10.add(Validate.Length, { is: 4 } );
		          </script> <br /><br />
                  Ingresa mas de 4 caracteres <input type="text" id="f11" />
				  <script type="text/javascript">
		            var f11 = new LiveValidation('f11');
		            f11.add(Validate.Length, { minimum: 4 } );
		          </script>  
				  <script type="text/javascript">
		            var f8 = new LiveValidation('f8');
		            f8.add(Validate.Numericality, { minimum: 2000, maximum: 2003 } );
		          </script><br /><br />
                  Ingresa menos de 4 caracteres<input type="text" id="f12" />
				  <script type="text/javascript">
		            var f12 = new LiveValidation('f12');
		            f12.add(Validate.Length, { maximum: 4 } );
		          </script>  <br /><br />
                 Ingresa minimo 4 y maximo 8 caracteres <input type="text" id="f13" />
				  <script type="text/javascript">
		            var f13 = new LiveValidation('f13');
		            f13.add(Validate.Length, { minimum: 4, maximum: 8 } );
		          </script><br /><br />
                    Ingresa las palabras cow o pigeon o giraffe <input type="text" id="f14" />
				  <script type="text/javascript">
		            var f14 = new LiveValidation('f14');
		            f14.add(Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );
		          </script> <br /><br />
                Debe incluir las palabras cow o pigeon o giraffe <input type="text" id="f15" />

				  <script type="text/javascript">
		            var f15 = new LiveValidation('f15');
		            f15.add(Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );
		          </script> <br /><br />
                  no escriba al principio cow o pigeon o giraffe <input type="text" id="f16" />
				  <script type="text/javascript">
		            var f16 = new LiveValidation('f16');
		            f16.add(Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );
		          </script>  <br /><br />
                   no Incluya las palabras cow o pigeon o giraffe <input type="text" id="f17" />

				  <script type="text/javascript">
		            var f17 = new LiveValidation('f17');
		            f17.add(Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );
		          </script><br /><br />
                   Marque la casilla de verificación  <input type="checkbox" id="f18" value="1" class="checkbox" />
				  <script type="text/javascript">
		            var f18 = new LiveValidation('f18');
		            f18.add(Validate.Acceptance );
		          </script> <br /><br />
                  <p>Enter a password: 
			      <input type="password" id="myPasswordField" />
				  <br />
				  Confirm password:
				  <input type="password" id="f19" />
				  <script type="text/javascript">
		            var f19 = new LiveValidation('f19');
		            f19.add(Validate.Confirmation, { match: 'myPasswordField'} );
		          </script>  <br /><br />
                 Validar email <input type="text" id="f20" />

				  <script type="text/javascript">
		            var f20 = new LiveValidation('f20');
		            f20.add(Validate.Email );
		          </script> <br /><br />
                 Combinación para validar email no vacio,formato y mas de 10 y menos de 20 <input type="text" id="f21" />
				  <script type="text/javascript">
		            var f21 = new LiveValidation('f21');
					f21.add( Validate.Presence );
					f21.add( Validate.Email );
		            f21.add(Validate.Length, { minimum: 10, maximum: 20 } );
		          </script>  
<p><input type="submit" value="Test me!" /></p>
                  <script type="text/javascript">
				  var automaticOnSubmit = sayHello.form.onsubmit;
          sayHello.form.onsubmit = function(){
	          var valid = automaticOnSubmit();
	          if(valid)alert('The form is valid!');
            return false;
          }
		  </script>
</form>
<br /><br />
<form action="#" method="post">
    			<fieldset>
    			  <legend>Example of form validation</legend>
    				<p><label for="field1" class="displayBlock">Email (optional):</label><input type="text" id="field1" /></p>
    				<p><label for="field2" class="displayBlock">Acceptance (required):</label><input type="checkbox" id="field2" class="checkbox" /></p>
    				<p><label for="field3" class="displayBlock">Presence (required):</label><textarea  id="field3" class="shallow" rows="2" cols="10"></textarea></p>

    		    <p><input type="submit" class="submit" value="Test me!" /></p>
    		  </fieldset>
    		</form>
        <script type="text/javascript">
    			var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
    			field1.add( Validate.Email );
    			var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
    			field2.add( Validate.Acceptance );
    			var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
    			field3.add( Validate.Presence );

          var automaticOnSubmit = field1.form.onsubmit;
          field1.form.onsubmit = function(){
	          var valid = automaticOnSubmit();
	          if(valid)alert('The form is valid!');
            return false;
          }
    	  </script> 
</body>
</html>